{% extends 'basic/component.html' %}
{% load static %}
{% load i18n %}

{% block pageTitle %}
    {% trans 'About' %}
{% endblock %}

{% block pageHeadExtra %}
{% endblock %}

{% block pageBody %}
    {% get_media_prefix as MEDIA_ROOT %}

  <div class="container docs-container">
    <div class="row">
      <div class="col-md-9" role="main">
        <div class="docs-section">
            <h1 id="index" class="page-header">Introduction</h1>
            <p>Based on machine learning, automatic machine learning and some material tools,
                the Data Collect Fusion Application provides open web-based access to computed
                material information as well as advanced technology to inspire and design novel materials.</p>
{#            <p>#}
{#                <img src="" class="img-responsive img-rounded">#}
{#            </p>#}
        </div>{# 1 #}
        <div class="docs-section">
            <h1 id="start-using" class="page-header">Start Using</h1>
            <p>The DCF system supports browsers such as IE10 and above, Chrome, Safari, etc. It is recommended to use Chrome or a Chromium-based browser (such as 360 browser, Sogou browser, etc.) to access the DCF system.</p>

            <h2 id="register">Register&nbsp;¶</h2>
            <p>On the <a href="{% url 'accounts:register' %}" >Register</a> page, you can complete the registration in just a few short steps (if you are already logged in, you will be taken to the home page). In particular, the email address cannot be duplicated.</p>
            <p>Once the registration is successful, you can immediately go to the <a href="{% url 'accounts:login' %}" >Login</a> page to log in.</p>

            <h2 id="login">Login&nbsp;¶</h2>
            <p>Users who already have the account of the website can log in. Users who have no account can register for a new account by going to the registration page.</p>
            <p>On the login page, the user must enter the account information correctly according to the prompts before entering the system.</p>
        </div>{# 2 #}
        <div class="docs-section">
            <h1 id="functions" class="page-header">Services</h1>

            <h2 id="functions-storage">Data Storage&nbsp;¶</h2>
            <p>On the "My Resources"<i class="fa fa-long-arrow-right" aria-hidden="true"></i>"<a href="{% url 'storage:my_template' %}" >My Data</a>" page, users can view and create templates and store material data.</p>
            <h3>Templates Creation</h3>
            <p>In the template interface, the user can view the template created by himself, and click the “Add” button in the upper right corner to enter the template creation page. When a user creates a template, he or she needs to specify the material classification to which the template belongs. The user can add the corresponding data type by dragging the left label.</p>
            <h3>Manual Storage</h3>
            <p>In the data interface, the user can view the data submitted by himself, and click the “Add” button in the upper right corner to enter the data creation page. User submission of data requires the following steps:</p>
            <ul>
                <li>Select the material classification for the data you want to add;</li>
                <li>Select the template under the material category;</li>
                <li>Select the template under the material category;</li>
                <li>Fill in the generated form or generated file and submit or upload it.</li>
            </ul>
            <h3>Automatic Storage</h3>
            <p>The DCF system provides automatic storage technology. Please refer to the API for details <a href="https://apizza.net/pro/#/project/a32c2171ee8072f64e12a243d77e4041/browse" target="_blank">link</a>.</p>

            <h2 id="functions-search">Data Search&nbsp;¶</h2>
            <p>On the data <a href="{% url 'search:search' %}" >Search</a> page, the user can search for data according to indicators such as title, author, keyword, full-text search, etc., and further classify and sort the searched data.</p>

            <h2 id="functions-analysis">Data Analysis&nbsp;¶</h2>
            <p>On the <a href="{% url 'analysis:index' %}" >Analysis</a> page, users can view the overall data distribution of the DCF system, including the total number of data views, total downloads, total data, and total templates.</p>
            <p>The left side of the page shows the material classification of the DCF system. By clicking on each branch, the data distribution under the branch will be presented on the right side of the page, including the amount of data, the amount of downloads, the amount of data, and the amount of templates.</p>

            <h2 id="functions-ml">Machine Learning Tools&nbsp;¶</h2>
            <h3>Upload Datasets</h3>
            <p>On the "My Resources"<i class="fa fa-long-arrow-right" aria-hidden="true"></i>"<a href="{% url 'storage:my_template' %}" >My Data</a>" page, users can view the data set submitted by themselves and click the “Upload” button in the upper right corner to enter the dataset upload page. Users can upload files such as .xlsx, .xlx, .txt, .csv, etc. as required.</p>
            <h3>Tasks Creation</h3>
            <p>On the <a href="{% url 'mlplatform:index' %}" >Machine Learning Platform </a>page, users are required to submit machine learning tasks according to the process:</p>
            <ul>
                <li>Select the data set and select the tag;</li>
                <li>Select an algorithm or an automatic learning model to set training parameters;</li>
                <li>After confirming the error, submit the task and wait for the system to process it.</li>
            </ul>
            <p>On the "My Resources"<i class="fa fa-long-arrow-right" aria-hidden="true"></i>"<a href="{% url 'mlplatform:my_tasks' %}" >My Tasks</a>" users can view tasks that have already been submitted.</p>

            <h2 id="functions-image">ImageRecongnize Tools&nbsp;¶</h2>
            <p>On the <a href="{% url 'imagerecognize:image' %}" >ImageRecongnize</a> page，users can upload some images to identify and classify them.</p>
            <h3>Tasks Creation</h3>
            <ul>
                <li>Fill in the name of the image recognition task;</li>
                <li>Fill in a brief description of the image recognition task;</li>
                <li>There is a test class by default when you create a task, users can not delete it or rename it.</li>
            </ul>
            <h3>Category Creation</h3>
            <ul>
                <li>Fill in the name of the category;</li>
                <li>Fill in a brief description of the category;</li>
                <li>Users cannot create a category named ‘test’;</li>
                <li>Users can upload images such as .jpeg, .png, .jpg or .zip files, and the page can dynamically display uploaded images.</li>
            </ul>
            <h3>开始任务</h3>
            <ul>
                <li>Test class of ‘test’ contains at least one image;</li>
                <li>There are at least two categories in addition to the test class.</li>
            </ul>

            <h2 id="functions-material">Material Analysis Tools&nbsp;¶</h2>
            <p>On the <a href="{% url 'material:all_materials' %}" >Machine Analysis Tools</a> page, users can view all material analysis tools referenced by the DCF system.</p>
            <h3 id="">Performance Prediction</h3>
            <p>The tool uses the RESTful API, AFLOW-ML, to perform performance predictions for material data in the POSCAR format.</p>
            <h3 id="">Perovskite Stability Prediction</h3>
            <p>This tool predicts the perovskite form of the ABX compound. Users can use this tool to freely combine the perovskite elements in the A and B positions to obtain the perovskite chemical formula, and then obtain the prediction results about the stability and formation energy of the perovskite, in order to screen the new highly stable perovskite oxidation. The object provides an auxiliary mechanism.</p>

            <h2 id="functions-info">Information Management&nbsp;¶</h2>
            <h3 id="">Information Change</h3>
            <h4>Change Password</h4>
            <p>If the user forgets the password, he can click “Forgot Password? Click Reset.” on the login page to enter the reset password request page.</p>
            <p>To reset the password, you need to provide the email address reserved when the user registers. Only when the email address is detected by the system, the system will send a password reset email to the email address. You need to enter the reset password page through the link in the email to perform a password reset operation.</p>
            <h4>Other Operations</h4>
            <p>After the user enters the system, he can enter the <a href="{% url 'accounts:info' %}" >My Information</a> page to perform the following operations:</p>
            <ul>
                <li>Modify the name, affiliation, and email address;</li>
                <li>Send a verification email and verify the email address;</li>
                <li>Change password;</li>
                <li>Set or modify the avatar;</li>
                <li>Manage notification information.</li>
            </ul>
            <h3 id="">My Data</h3>
            <p>On the <a href="{% url 'storage:my_template' %}" >My Data</a> page, users can view their submitted data, created templates, and uploaded data sets.</p>
            <h3 id="">My tasks</h3>
            <p>On the <a href="{% url 'mlplatform:my_tasks' %}" >My Tasks</a> page, users can view their own machine learning tasks.</p>
            <p>The task is divided into four parts according to its status:</p>
            <ul>
                <li>All tasks, all machine learning tasks submitted by the user;</li>
                <li>Unconducted tasks, the tasks waiting to be processed by the system</li>
                <li>Running tasks, the tasks being processed by the system</li>
                <li>Completed tasks, the tasks submitted by the user have been processed by the system background and returns the result.</li>
            </ul>
            <p>Click on each task record to go to the task details page for that task. On the task details page, the user can view detailed information about the task, including data sets, algorithms, task status, and more. For "completed" tasks, users can also view task results.</p>
            <p>The user clicks on the "Add" button in the upper right corner to jump to the machine learning platform page.</p>
        </div>{# 3 #}
      </div>

      <div class="col-md-3" role="complementary">
        <nav id="docs-sidebar" class="docs-sidebar hidden-print hidden-xs hidden-sm affix">
          <ul class="nav nav-pills nav-stacked">
            <li>
              <a href="#index" class="collapsed" data-target="#index">Introduction</a>
            </li>{# 1 #}
            <li>
              <a href="#start-using" class="collapsed" data-toggle="collapse" data-target="#start-using-navbar">Start Using</a>
              <ul id="start-using-navbar" class="nav collapse">
                <li><a href="#register" data-target="#register">Register</a></li>
                <li><a href="#login" data-target="#login">Log in</a></li>
{#                <li><a href="#personal-setting" data-target="#personal-setting">个人设置</a></li>#}
              </ul>
            </li>{# 2 #}
            <li>
              <a href="#functions" class="collapsed" data-toggle="collapse" data-target="#functions-navbar">Services</a>
              <ul id="functions-navbar" class="nav collapse">
                <li><a href="#functions-storage" data-target="#functions-storage">Data Storage</a></li>
                <li><a href="#functions-search" data-target="#functions-search">Data Search</a></li>
                <li><a href="#functions-analysis" data-target="#functions-analysis">Data Analysis</a></li>
                <li><a href="#functions-ml" data-target="#functions-ml">Machine Learning Tools</a></li>
                <li><a href="#functions-image" data-target="#functions-image">ImageRecongnize Tools</a></li>
                <li><a href="#functions-material" data-target="#functions-material">Material Analysis Tools</a></li>
                <li><a href="#functions-info" data-target="#functions-info">Information Management</a></li>
              </ul>
            </li>{# 3 #}
          </ul>
        </nav>
      </div>
    </div>
  </div>
{% endblock %}

{% block pageFootExtra %}
    <link href="{% static 'css/accounts/about.css' %}" rel="stylesheet">
    <script src="{% static 'js/accounts/about.js' %}"></script>
{% endblock %}